<template>
  <view class="category">
    <ugo-search></ugo-search>
    <!-- 左边 -->
    <view class="main">
      <view class="left">
        <view
          class="item"
          v-for="(item, index) in menuList"
          @click="changeIndex(index)"
          :class="currentIndex === index ? 'active' : ''"
          :key="item.cat_id"
        >
          {{ item }}
        </view>
      </view>
      <!-- 右边 -->
      <view class="right">
        <view class="group" v-for="item1 in itemList" :key="item1.cat_id">
          <view class="group-title">/\n{{ item1.cat_name }}\n/</view>
          <view class="group-content">
            <navigator
              class="group-content-item"
              v-for="item2 in item1.children"
              :key="item2.cat_id"
              :url="`/pages/goods_list/goods_list?cid=${item2.cat_id}`"
            >
              <u-image width="120" height="120" :src="item2.cat_icon"></u-image>
              <view class="test">{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // categories: [],
      // 添加点击事件改变index
      currentIndex: 0,
      menuList: [],
      itemList: [],
    };
  },
  onLoad() {
    this.getCategories();
  },
  methods: {
    async getCategories() {
      // 相当于给全局变量赋值,全局变量不能直接运用于页面渲染
      this.categories = await this.$u.get("/categories");
      this.menuList = this.categories.map((item) => item.cat_name);
      this.itemList = this.categories[this.currentIndex].children;
    },
    // 改变索引
    changeIndex(index) {
      this.currentIndex = index;
      this.itemList = this.categories[this.currentIndex].children;
    },
  },
  // computed: {
  //   // 通过计算属性返回数据，渲染
  //   menuList() {
  //  this.categories因为不在data中，所以不能直接使用
  //     return this.categories.map((item) => item.cat_name);
  //   },
  //   itemList() {
  //     return this.categories.length
  //       ? this.categories[this.currentIndex].children
  //       : [];
  //   },
  // },
};
</script>

<style lang="scss" scoped>
.category {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.left {
  width: 182rpx;
  background-color: #f3f3f3;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
  .item {
    line-height: 75rpx;
    position: relative;
  }
  .active {
    color: $theme-color;
    &::after {
      position: absolute;
      top: -1rpx;
      left: -15rpx;
      display: block;
      content: "|";
      color: $theme-color;
    }
  }
}
.right {
  width: calc(100vw - 182rpx);
  overflow: auto;
  .group {
    .group-title {
      line-height: 75rpx;
      text-align: center;
    }
    .group-content {
      display: flex;
      flex-wrap: wrap;
      .group-content-item {
        width: 33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 10rpx;
      }
    }
  }
}
</style>